<template>
  <div>
    <!-- 面包屑 -->
    <v-breadcrumb></v-breadcrumb>

    <!-- 添加按钮 -->
    <el-button type="primary" plain size="small" class="m20" @click="add">添加</el-button>

    <!-- 角色列表 -->
    <v-list @edit="edit"></v-list>

    <!-- 弹框 -->
    <v-dialog :info="info" @cancel="cancel" ref="dialog"></v-dialog>
  </div>
</template>

<script>
import vList from "./list.vue";
import vDialog from "./dialog.vue";
export default {
  components: {
    vList,
    vDialog
  },
  data() {
    return {
      info: {
        isshow: false, //是否显示弹框
        isadd: true //是添加还是编辑
      }
    };
  },
  methods: {
    //1.点击添加按钮
    add() {
      this.info.isshow = true;
      this.info.isadd = true;
    },
    //2.点击取消关闭弹窗
    cancel() {
      this.info.isshow = false;
    },
    //点击编辑
    edit(id) {
      this.info.isshow = true;
      this.info.isadd = false;

      //回显数据
      this.$refs.dialog.lookup(id);
    }
  }
};
</script>

<style>
</style>